import React, { Component } from 'react';
import { Link, Route, Redirect, Switch } from 'react-router-dom';
//引入电影列表组件
import MovieList from './MovieList';
//电影详情组件
import MovieDetail from './MovieDetail'
import { Layout, Menu } from 'antd';
const { Content, Sider } = Layout;

class MovieContainer extends Component {

  render() {
    return (
      <Layout className="site-layout-background">
        <Sider className="site-layout-background" width={200}>
          <Menu
            mode="inline"
            defaultSelectedKeys={[window.location.hash.split('/')[2]] || 'in_theaters'}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
          >
            <Menu.Item key="in_theaters"><Link to="/movie/in_theaters/1">正在热映</Link></Menu.Item>
            <Menu.Item key="coming_soon"><Link to="/movie/coming_soon/1">即将上映</Link></Menu.Item>
            <Menu.Item key="top250"><Link to="/movie/top250/1">Top250</Link></Menu.Item>
          </Menu>
        </Sider>
        <Content style={{ padding: '0 24px', minHeight: 280 }}>
          {/* 
          Switch 路由从上到下 匹配到又一个对 就不会在向下匹配了
           要注意顺序 注意路由的特殊性  参数越多 特殊性越低 使用switch包裹 特殊性由高到低排放
           */}
          <Switch>
            <Route exact path="/movie" render={() => <Redirect to="/movie/in_theaters/1" />}></Route>
            {/* 电影详情组件渲染 */}
            <Route exact path="/movie/detail/:id" component={MovieDetail}></Route>
            {/* 电影列表组件渲染 */}
            <Route exact path="/movie/:type/:page" component={MovieList}></Route>
          </Switch>
        </Content>
      </Layout>
    )
  }
}
export default MovieContainer;